<template>
    <div  class="red-packet">
        <div>
        <div class="packet">
            <div class="Advertisement">
                <img :src="img" alt="">
            <!-- <em>惠万众 送您一个大温暖 立即领取</em> -->
            </div>
            <button class="openBag" @click="receive" >打开红包</button>
        </div>
            <!-- 底部菜单 -->
            <!-- <Footer></Footer> -->
        </div>
        <!-- 弹框 -->
        <div class="black" v-show="isShow"></div>
        <div class="rule" v-show="isShow2">
            <p class="ruleTel">提示</p>
            <div>
                <!-- <p>已经领了2次了，分享可在领一次</p> -->
                <p class="ruleText">每个活动只能领1次红包，分享可在领1次</p>
                <div class="ruleBtn">
                    <router-link :to="'/User'" class="link">查看余额</router-link>
                </div>
            </div>
            <i @click="times">&times;</i>
        </div>
    </div>
</template>

<script>
//底部菜单
// import Footer from '../Footer/Footer';
import url from 'url'
import qs from 'qs'
import wx from 'weixin-jsapi'
//会员列表
export default {
    name: 'integral',
    data () {
        return {
            isShow:false,
            isShow2:false,
            //isOpenRedpack: false, // 已打开红包
            img:'',//require('http://huiwanzhong.ay1.cc  /uploads/20190108/dd3e0f2d0a2dcdb2c1102ad0775d61f4.jpg')
            id:'',
            url:'http://api.huiwanzhong365.com',
            // isShow:false,
            money:'',
            merchant_name:'',
            logo:'',
            merchant_id:'',
            activity_id: '',
            openid: '',
            red:'',
            page:0,
        }
    },
    components: {
        // Footer
    },
    methods:{
        switchTo(path){
        // console.log(this.$router)
            this.$router.push(path)
        },
        //领取红包
        activity:function(){
            var uo = url.parse(window.location.href, true)
            var self = this
            var openid = localStorage.getItem("openid")

            var draw = {
                activity_id:uo.query.activity_id,    
                openid:openid,
            }
            self.$http.post('/index/merchant/RedEnvelopeRead',qs.stringify(draw)).then(res=>{
                console.log(res.data)
                //that.red = res.data   http://vue.ay1.cc/uploads/20190108/dd3e0f2d0a2dcdb2c1102ad0775d61f4.jpg
                self.img = this.url + res.data.img_url ;
                self.id = res.data.id;
                // this.$router.push({name:'红包',query:{ money : rs.data.money }});
            }).catch(err=>{
                console.log(err)
            })
        },

        mId:function(){
            var self = this
            var uo = url.parse(window.location.href, true)
            //console.log(uo.query.merchant_id) 
            var openid = localStorage.getItem("openid")
            var draw = {
                merchant_id:uo.query.merchant_id,    
                openid:openid,
            }
            self.$http.post('/index/merchant/MerchantLogo',qs.stringify(draw)).then(res=>{
                console.log(res)
                this.share(res)
            }).catch(err=>{
                console.log(err)
            })
        },
        //打开红包
        receive:function(){
            
            var that = this;
            //console.log(that.red)
            var uo = url.parse(window.location.href, true)
            //console.log(uo.query.activity_id)
            //console.log('111')
            var openid = localStorage.getItem("openid")
            // if(that.red == false){
            var draw = {
                openid:openid,
                merchant_id:uo.query.merchant_id,
                activity_id:uo.query.activity_id,      
            }
            that.$http.post('/index/merchant/draw',qs.stringify(draw)).then(rs=>{
                console.log(rs.data)
                if(rs.data.info == 1005){
                    alert('用户信息不存在')
                }else if(rs.data.info == 1006){
                    //alert('最多只能领取3次')
                    that.isShow = true;
                    that.isShow2 = true
                }else if( rs.data.info == 1004 ){
                    alert('红包已被领完')
                }else{
                    // that.money = rs.data.money;
                    // that.isOpenRedpack = true;
                    that.$router.push({name:'红包',query:{ money : rs.data.money , id : rs.data.id}});
                }
                // this.$router.push({name:'红包',query:{ money : rs.data.money }});
            }).catch(err=>{
                console.log(err)
            })
        },
        // 分享领第三次
        click:function(){
            //console.log('123')
            var that = this
            var uo = url.parse(window.location.href, true)
            var openid = localStorage.getItem("openid")
            var draw1 = {
                activity_id:uo.query.activity_id, 
                openid:openid,
            }
            that.$http.post('/index/merchant/redPacket',qs.stringify(draw1)).then(res=>{
                console.log(res.data)
                this.red = res.data
                that.$router.push({name:'RedPacket'});
            }).catch(err=>{
                console.log(err)
            })
        },
        //微信分享
        share:function(res){
            // var uo = url.parse(window.location.href, true)
            // console.log()
            var uo = url.parse(window.location.href, true)
            console.log(uo)
            console.log()
            var that = this
            wx.ready(function(){
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                wx.onMenuShareAppMessage({
                    title: res.data.merchant_name +'(滨江道店)', // 分享标题
                    desc: '送您一个红包，可提现至微信', // 分享描述
                    link: uo.protocol + uo.pathname + uo.pathname+ uo.host + uo.path + '&u_openid=' + localStorage.getItem("openid") + uo.hash, // 分享链接
                    // imgUrl:'http://huiwanzhong.ay1.cc' + res.data.logo , // 分享图标
                    imgUrl:'http://www.huiwanzhong365.com/img/hongbao.png',
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    success: function () { 
                        alert("分享成功");
                        that.click();
                    },
                    cancel: function () { 
                        alert("未分享!");
                    }
                });
                //分享
                wx.onMenuShareTimeline({
                    title: res.data.merchant_name +'(滨江道店)', // 分享标题
                    desc: '送您一个红包，可提现至微信', // 分享描述
                    link: uo.protocol + uo.pathname + uo.pathname+ uo.host + uo.path + '&u_openid=' + localStorage.getItem("openid") + uo.hash, // 分享链接
                    imgUrl:'http://huiwanzhong.ay1.cc' + res.data.logo, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        alert("分享成功");
                        that.click();
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        alert("未分享!");
                    }
                });
            });
        },
        // 关闭弹框
        times:function(){
            this.isShow = false;
            this.isShow2 = false;
        },
        hideBoun:function(){
            var that = this
            that.isOpenRedpack = false;
        },
        // 下拉分页
        loadPointsList:function(){

        }
        
    },
    mounted(){
        this.mId();
       
        //屏幕宽度，高度
        var w_h=  $(window).height();
        //console.log(w_h)
        if(w_h == 667){
            $('.Advertisement img').height(564)
        }else if(w_h >= 1000){
             $('.Advertisement img').height(896)
        }else if(w_h >= 800){
             $('.Advertisement img').height(723)
        }else if(w_h == 736){
             $('.Advertisement img').height(630)
        }else if(w_h >= 720){
             $('.Advertisement img').height(627)
        }else if(w_h >= 720){
             $('.Advertisement img').height(627)
        }else if(w_h >= 600){
             $('.Advertisement img').height(510)
        }else if(w_h >= 520){
             $('.Advertisement img').height(480)
        }else if(w_h >= 420){
             $('.Advertisement img').height(476)
        }
        
        var uo = url.parse(window.location.href, true)
        this.activity_id = uo.query.activity_id;
        this.merchant_id = uo.query.merchant_id;
        this.openid = localStorage.getItem("openid");
        this.activity();
        // this.getMchInfo();
	},

}
</script>
<style scoped>
html,body{
    width:100%;
    height:100%;
    background: #FF3914;
}
.red-packet{
    width:100%;
    height:100%;
    background: #FF3914;
    display: inline-grid;
    position: relative;
    z-index: 1;
}
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.rule{
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.ruleTel{
    font-size:18px;
    font-weight: 600;
    margin-top:15px;
}
.ruleText{
    font-size:13px;
    margin-top:15px;
    width:94%;
    margin-left:3%;
    line-height: 24px;
    color:#999;
}
.rule p:nth-child(4){
    font-size:12px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 15px;
}
.rule p:nth-child(4) a{
    color:#259B24;
}
.rule i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.ruleBtn{
    margin-top:15px;
}

.link{
    width: 100px;
    text-align: center;
    height: 34px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    border: 0;
    display: inline-block;
    line-height: 38px;
    margin-bottom: 15px;
}
.packet{
    width:94%;
    margin:0 3%;
    padding:5% 0 0;
}
.Advertisement{
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.Advertisement img{
    width:100%;
}
@media screen and (max-width: 420px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:560px;
    }
}
@media screen and (max-width: 375px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:506px;
    }
}
@media screen and (max-width: 365px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:475px;
    }
}
@media screen and (max-width: 355px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:475px;
    }
}
@media screen and (max-width: 335px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:465px;
    }
}
@media screen and (max-width: 320px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .Advertisement img{
        width:100%;
        height:420px;
    }
}



.Advertisement em{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:42px;
    background-color: rgba(229, 28, 35, 0.11);
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: center;
    line-height: 42px;
}
.openBag{
    width:100%;
    display: inline-block;
    background: #F18B21;
    color:#FFF;
    height:48px;
    border:0;
    border-radius: 1px;
    margin:15px 0;
}
/**/
.RedPacketDetail{
    background: #ff3914;
    text-align: center;
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 2;
    border-radius: 5px;
    overflow: hidden;
}
hr{
    width: 92%;
    margin-left: 4%;
    border: 0;
    border-top: 1px solid #ccc;
}
.detail-top{
    position: absolute;
    top:0;
    left:0;
    height:44px;
    width:100%;
    background:rgba(0, 0, 0, 0.3);
    text-align: left;
}
.detail-top img{
    width: 30px;
    height: 30px;
    margin-left: 15px;
    vertical-align: middle;
}
.detail-top em{
    line-height: 44px;
    color:#FFF;
}
.detail-top i{
    position: absolute;
    top: 5px;
    right: 13px;
    color: #FFF;
    font-size: 20px;
}
.RedPacketDetailimg{
    width:150px;
    height:150px;
    margin-top:40px;
}
.detail-money{
    margin-top:80px;
    margin-bottom: 50px;
    color:#FFF;
}
.detail-money em{
    font-size:24px;
    font-weight: 600;
}
.detail-text{
    margin-top:40px;
    color:#FFF;
}
.detail-footer{
    position:absolute;
    bottom:0;
    left:0;
    height:25px;
    width:100%;
    background:rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 25px;
}
.detailBtn{
    color: #A22D0A;
    background: #FFEA58;
    display: inline-block;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 30px;
}
</style>